<template>
    <div class="wrap w-100% h-100%">
        <div class="ball_box circle" v-for="(item, index ) in ballList" :key="index" :style="{
            width: item.size + 10 + 'px',
            height: item.size + 10 + 'px',
            border: `1px solid ${item.color}`
        }">
            <div class="ball" :style="{
                width: item.size + 'px',
                height: item.size + 'px',
                backgroundColor: item.color,
                lineHeight: item.size + 'px'
            }">{{ item.knowledge }}</div>
        </div>
    </div>
</template>
<script setup>
import { ref } from 'vue'

const props = defineProps({
    dataList: {
        type: Array,
        default: () => [
            {
                knowledge: '平型关大捷',
                size: 100,
                color: '#D9BD35'
            },
            {
                knowledge: '辽阳战役',
                size: 70,
                color: '#A87BDC'
            },
            {
                knowledge: '井冈山斗争',
                size: 80,
                color: '#3A8FEA'
            },
            {
                knowledge: '长征',
                size: 50,
                color: '#88CD9A'
            },
            {
                knowledge: '平型关大捷',
                size: 100,
                color: '#D9BD35'
            },
            {
                knowledge: '辽阳战役',
                size: 70,
                color: '#A87BDC'
            },
            {
                knowledge: '井冈山斗争',
                size: 80,
                color: '#3A8FEA'
            },
            {
                knowledge: '长征',
                size: 50,
                color: '#88CD9A'
            },
            {
                knowledge: '平型关大捷',
                size: 100,
                color: '#D9BD35'
            },
            {
                knowledge: '辽阳战役',
                size: 70,
                color: '#A87BDC'
            },
            {
                knowledge: '井冈山斗争',
                size: 80,
                color: '#3A8FEA'
            },
            {
                knowledge: '长征',
                size: 50,
                color: '#88CD9A'
            },
            {
                knowledge: '平型关大捷',
                size: 100,
                color: '#D9BD35'
            },
            {
                knowledge: '辽阳战役',
                size: 70,
                color: '#A87BDC'
            },
            {
                knowledge: '井冈山斗争',
                size: 80,
                color: '#3A8FEA'
            },
            {
                knowledge: '长征',
                size: 50,
                color: '#88CD9A'
            },
            {
                knowledge: '平型关大捷',
                size: 100,
                color: '#D9BD35'
            },
            {
                knowledge: '辽阳战役',
                size: 70,
                color: '#A87BDC'
            },
            {
                knowledge: '井冈山斗争',
                size: 80,
                color: '#3A8FEA'
            },
            {
                knowledge: '长征',
                size: 50,
                color: '#88CD9A'
            },
            {
                knowledge: '平型关大捷',
                size: 100,
                color: '#D9BD35'
            },
            {
                knowledge: '辽阳战役',
                size: 70,
                color: '#A87BDC'
            },
            {
                knowledge: '井冈山斗争',
                size: 80,
                color: '#3A8FEA'
            },
            {
                knowledge: '长征',
                size: 50,
                color: '#88CD9A'
            },
            {
                knowledge: '平型关大捷',
                size: 100,
                color: '#D9BD35'
            },
            {
                knowledge: '辽阳战役',
                size: 70,
                color: '#A87BDC'
            },
            {
                knowledge: '井冈山斗争',
                size: 80,
                color: '#3A8FEA'
            },
            {
                knowledge: '长征',
                size: 50,
                color: '#88CD9A'
            },
            {
                knowledge: '平型关大捷',
                size: 100,
                color: '#D9BD35'
            },
            {
                knowledge: '辽阳战役',
                size: 70,
                color: '#A87BDC'
            },
            {
                knowledge: '井冈山斗争',
                size: 80,
                color: '#3A8FEA'
            },
            {
                knowledge: '长征',
                size: 50,
                color: '#88CD9A'
            },
            {
                knowledge: '平型关大捷',
                size: 100,
                color: '#D9BD35'
            },
            {
                knowledge: '辽阳战役',
                size: 70,
                color: '#A87BDC'
            }
        ],
    },
    num: {
        type: Number,
        default: 5,
    },
    showAll: {
        type: Boolean,
        default: false,
    }
})

watch(() => props.showAll, (v) => {
    v ? ballList.value = props.dataList : ballList.value = props.dataList.slice(0, props.num)
})

const dataList = ref()
const ballList = ref([])



onMounted(() => {
    ballList.value = props.dataList.slice(0, props.num)
})


</script>
<style lang="scss" scope>
.wrap {
    display: flex;
    flex-wrap: wrap;
    padding: 20px 0;
    justify-content: space-around;
}

.ball_box {
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ball {
    border-radius: 50%;
    text-align: center;
    font-size: 14px;
    color: #fff;
}

.circle {
    animation: fulfilling-bouncing-circle-spinner-orbit-animation infinite 3000ms ease, mymove infinite 900ms;
    transform: rotate(0deg) scale(1);
    border: 1px solid #379ffe;
    box-shadow: 0px 0px 7px 2px rgb(55 159 254 / 80%);
}

@keyframes fulfilling-bouncing-circle-spinner-orbit-animation {
    0% {
        transform: scale(1);
    }

    25% {
        transform: scale(0.8);
    }

    50% {
        transform: scale(1);
    }

    75% {
        transform: scale(0.8);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes mymove {
    from {
        box-shadow: 0 0 0 0 rgba(144, 131, 131, 0.7);
    }

    to {
        box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.5);
    }
}
</style>